<template>
	<view class="container">
		<NavBar title="文章详情"></NavBar>
		<AboutPost v-if="flag" :post="post"></AboutPost>
		<Comment 
			:tid="tid" 
			:commentList="commentList" 
			:replyList="replyList"
			@refreshComment='update'
			@refreshReply="update"
		></Comment>
	</view>
</template>

<script>
	import AboutPost from './components/AboutPost'
	import Comment from './components/Comment'
	export default {
		components: {
			AboutPost,
			Comment
		},
		data() {
			return {
				tid:'',
				flag:false,
				post:{},
				commentList:[],
				replyList:[]
			}
		},
		onLoad(data){
			this.tid = data.tid
		},
		onReady(){
			this.getPost()
			this.getCommentList()
			this.getReplyList()
		},
		computed:{
			token(){
				return this.$store.state.auth.token
			}
		},
		watch:{
			token(){
				this.getCommentList()
			}
		},
		methods:{
			async getPost () {
			  const { code, data } = await this.$axios.api.getPost({ tid: this.tid })
			  if (code === 200) {
				  this.post = data
				  this.flag = true
			  }
			},
			async getCommentList () {
			  const { code, data } = await this.$axios.api.getComment({ tid: this.tid })
			  if (code === 200) {
				this.commentList = data
			  }
			},
			async getReplyList () {
			  const { code, data } = await this.$axios.api.getReply({ tid: this.tid })
			  if (code === 200) {
				this.replyList = data
			  }
			},
			update(type){
				if(type === 'comment'){
					this.getCommentList()
				}else if(type === 'reply'){
					this.getReplyList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	height: auto;
	display: flex;
	flex-direction: column;
	background-color: rgba(31, 182, 131,0.1);
}
</style>
